
import React, { useState, useEffect, useMemo, useRef } from 'react'
import './index.scss'

const viewHeight = 550; // 容器高度
const demoHeight = 55; // demo高度
const count = viewHeight/demoHeight   // 预加载时的数量


function List(props){
    // 数据集合
    const [listData,setListData]=useState([]);
    // 需要显示的数据起始位置
    const [number,setNumber]=useState({
        start:0,
        end:count,
    })
    // 容器ref
    const currentRef = useRef();
    // 初始化100个数据
    useEffect(() => {
        const initList = Array.from(Array(100).keys());
        setListData(initList)
    }, [])
    // 当前需要展示的demo
    const currentViewList = useMemo(() => {
        return listData.slice(number.start, number.end)
      }, [number, listData]);
    // 计算起始位置渲染元素  
    const calculateRange = () => {
        const element = currentRef.current;
        if (element) {
            // 获取滚动时偏移的值，用滚动距离/demo高度
            const offset = Math.floor(element.scrollTop / demoHeight) + 1;
            const startSize = offset - 2; //多渲染两个避免空白
            const endSize = offset + count ;
            setNumber({
                start: startSize < 0 ? 0 : startSize,
                end: endSize > listData.length ? listData.length : endSize
            });
        }
    }; 
    // 判断是否到底
    const isScrollBottom = () => {
        const contentScrollTop = currentRef.current?.scrollTop || 0; //滚动条距离顶部
        const clientHeight = currentRef.current?.clientHeight || 0; //可视区域
        const scrollHeight = currentRef.current?.scrollHeight || 0; //滚动条内容的总高度
        // 加一个demo高度，有接口回调时处理梳理
        if (contentScrollTop + clientHeight+ demoHeight>= scrollHeight) {
          return true;
        }
        return false;
      }; 
    // 滚动时间
    const onContainerScroll = (event) => {
        event.preventDefault();
        if (isScrollBottom()) {
            // 模拟添加数据，这里一般都是接口请求了
          
            let endIndex = listData.pop();
            let pushData = [];
            for (let index = 0; index < 20; index++) {
              pushData.push(endIndex+index+1);
            }
            setListData((arr) => {
              return [...arr, ...pushData];
            });
          
        }
        calculateRange();
    };  
    // 计算可滚动scrollviewheight总高度
    const scrollViewHeight = useMemo(() => {
        return listData.length * demoHeight;
    }, [listData]);
    // 计算demo展示区的偏移高度
    const scrollViewOffset = useMemo(() => {
        return number.start * demoHeight;
    }, [number.start]);
    return (
        <div className="box" 
            ref={currentRef}
            onScroll={onContainerScroll}
        >
            <div className="scroll_box"
                style={{
                    width: "100%",
                    height: scrollViewHeight - scrollViewOffset,
                    transform: `translateY(${scrollViewOffset}px)`
                }}
            >
                {
                    currentViewList.map((item)=>(
                        <div className="demo" key={item}>
                            <h1>我是number-{item}</h1>
                            <h2>我是number-{item}的简介</h2>
                        </div>
                    )
                    )
                }
                
            </div>
        </div>
    )
}
export default List